
<html>

<head>
    <include file="public@head" title="需求发布" keywords="后台管理系统"/>
    <link rel="stylesheet" href="/static/css/tags.css" rel="stylesheet">

    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0;
        }

        .pic-more {
            float: left;
            margin: 0px 0px 0px 10px;
            width: 800px;
        }

        .pic-more li {
            width: 24%;
            float: left;
            padding-left: 1%;
        }

        .pic-more li .layui-input {
            display: initial;
        }

        .pic-more li a {
            position: absolute;
            top: 0;
            display: block;
        }

        .pic-more li a i {
            font-size: 24px;
            background-color: #008800;
        }
    </style>
</head>

<body class="layui-layout-admin">
<include file="public@header"/>
<include file="public@side"/>
<div class="layui-body">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a href="{:url('tdadmin/index/index')}">主页</a>
        <a>内容管理</a>
        <a href="{:url('index')}">成果管理</a>
        <a><cite>添加成果</cite></a>
    </div>
    <div class="layui-fluid">
        <div class="layui-card layui-row">
            <div class="layui-card-body">
                <form method="post" class="layui-form" id="userForm" action="{:url('add')}"  enctype="multipart/form-data">
                    <div class="layui-col-md9">
                        <div class="layui-form-item">
                            <label class="layui-form-label">成果分类<span class="form-required">*</span></label>
                            <div class="layui-input-inline">
                                <select name="type" lay-verify="required">
                                    <foreach name="categories" item="vo">
                                        <option value="{$vo.id}">{$vo.name}</option>
                                    </foreach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题<span class="form-required">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="title" lay-verify="required"
                                       placeholder="请输入需求标题">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">关键字<span class="form-required">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="keywords" lay-verify="required"
                                       placeholder="请输入关键字">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">上传附件</label>
                            <div class="layui-input-block">
                                <input  class="layui-input"  type="file" name="file" id="file" accept="application/msword,application/xml-dtd,application/pdf,application/vnd.ms-powerpoint,application/vnd.ms-works"
                                    placeholder=" "
                                >
                                <span id="deleteFile">删除</span>
                                <br/>
                                <span>支持word,pdf,ppt格式</span>

                            </div>
                        </div>

                        <!--<div  class="layui-form-item">-->
                            <!--<div class="wrap">-->
                                <!--<div id="tagValue" class="label-selected">-->

                                <!--</div>-->

                                <!--<div style="float:left;width:100%">-->
                                    <!--<a class="layui-btn layui-btn-normal labela show-labelitem" style="margin-left: 0px; display: none; border-radius: 6px;">展开标签库 </a>-->
                                    <!--<a class="layui-btn layui-btn-normal labela hide-labelitem" style="margin-left: 0px; border-radius: 6px;">收起标签库 </a>-->
                                <!--</div>-->

                                <!--<input type="hidden" class="layui-input" name="tags" id="tags_input" value="$data['tags']" />-->

                                <!--<div class="layui-col-md12" id="labelItem" style="display: block;">-->
                                    <!--&lt;!&ndash;标签库&ndash;&gt;-->
                                    <!--<div  class="label-item" style="border-radius:6px;overflow-y: scroll;max-height:200px;">-->
                                        <!--<volist name="tagList" id="val">-->
                                            <!--<li data="{$val.id}" ><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>{$val.tag}</span></li>-->
                                        <!--</volist>-->
                                    <!--</div>-->
                                <!--</div>-->

                                <!--&lt;!&ndash; 前两个用于向后台提交数据     后3个用于页面判断 &ndash;&gt;-->
                                <!--&lt;!&ndash; 从标签库里选择的标签ID   1&ndash;&gt;                      &lt;!&ndash;仅从标签库选择，仅ID&ndash;&gt;-->
                                <!--&lt;!&ndash; <label>从标签库里选择的标签ID  :</label> &ndash;&gt;-->
                                <!--<div style="margin:15px;display:none;"><input name="imagelabels" disabled="true" id="imagelabels" style="width:300px"></div>-->

                                <!--&lt;!&ndash; 新增的自定义标签文字     2&ndash;&gt;                      &lt;!&ndash;2、3、4 都是文字，且有对应顺序的数组&ndash;&gt;-->
                                <!--&lt;!&ndash; <label>新增的自定义标签文字  :</label> &ndash;&gt;-->
                                <!--<div style="margin:15px;display:none"><input name="newtext" style="width:300px"></div>-->

                                <!--&lt;!&ndash; 所有已经选择的标签文字   3&ndash;&gt;-->
                                <!--&lt;!&ndash; <label>所有已经选择的标签文字  :</label> &ndash;&gt;-->
                                <!--<div style="margin:15px;display:none"><input name="selectedtext" disabled style="width:300px"></div>-->
                                <!--&lt;!&ndash; 所有标签库里的标签文字   4&ndash;&gt;-->
                                <!--&lt;!&ndash; <label>所有标签库里的标签文字  :</label> &ndash;&gt;-->
                                <!--<div style="margin:15px;display:none"><input name="existedtext" disabled style="width:300px"></div>-->

                                <!--<div class="add-label" style="display:inline-block">-->
                                    <!--<label style="font-weight:normal;">添加标签  :</label>-->
                                    <!--<input type="text" id="labelName" class="form-control" style="width:200px;display:inline-block;border-radius:6px; " placeholder="请输入标签名">-->
                                    <!--<a id="label-self" class="layui-btn layui-btn-normal" style="border-radius:6px;"><span class="glyphicon glyphicon-plus glyphicon glyphicon-plus glyphicon-plus-button" aria-hidden="true"></span>添加标签 </a>-->
                                <!--</div>-->

                            <!--</div>-->
                        <!--</div>-->



                        <div class="layui-form-item">
                            <label class="layui-form-label">正文<span class="form-required">*</span></label>
                            <div class="layui-input-block">
                                <textarea id="editor" style="width:100%;height:250px;" name="content"></textarea>
                            </div>
                        </div>
                       
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="add_fruit">添加</button>
                            <a class="layui-btn layui-btn-primary" href="javascript:history.back(-1);">返回</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<include file="public@scripts"/>
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
<script>
    UE.getEditor("editor");

    var upload = layui.upload,
        laydate = layui.laydate;

    upload.render({
        elem: '#btn-thumb',
        url: "{:url('api/asset/fileUpload')}",
        size: 20000,
        exts: 'jpg|png|bmp|jpeg',
        data: {path: 'article'},
        before: function (obj) {
            obj.preview(function (index, file, result) {
                $('#thumb-preview').attr('src', result); //图片链接（base64）
            });
        },
        done: function (res) {
            if (res.code == 0) {
                return layer.msg(res.message);
            }
            $('#input-thumb').val(res.filepath);
        }
    });

    var i = 0,
        j = 0;
    upload.render({
        elem: '#slide-pc',
        url: "{:url('api/asset/fileUpload')}",
        size: 3000,
        exts: 'jpg|png|jpeg',
        multiple: true,
        data: {path: 'article'},
        before: function (obj) {
            obj.preview(function (index, file, result) {
                var html = '<li><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">';
                html += '<input type="text" class="layui-input" name="pc_url[' + i + ']" value="" placeholder="http://" />';
                html += '<input type="text" class="layui-input" name="pc_alt[' + i + ']" placeholder="alt信息" value="' + file.name + '" /></li>';
                $('#slide-pc-priview').append(html);
                i++;
            });
        },
        done: function (res) {
            if (res.status == 0) {
                return layer.msg(res.message);
            }
            $('#slide-pc-priview').append('<input type="hidden" name="pc_src[' + j + ']" value="' + res.filepath + '" />');
            j++;
            $('#input-thumbs-count').val(j);
        }
    });

    laydate.render({
        elem: '#dateTime',
        type: 'datetime',
        value: new Date(),
        calendar: true
    });
    form = layui.form;
    form.on('submit(add_fruit)', function (data) {
        var formData = new FormData($( "#userForm" )[0]);
        $.ajax({
            cache : true,
            type : "POST",
            url : data.form.action,
            async : true,
            data : formData,  // 你的formid
            contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            error : function(request) {
                layer.alert('操作失败', {
                    icon: 2,
                    title:"提示"
                });
            },
            success : function(ret) {
                if (ret.code == 0) {
                    layer.alert(ret.msg, {
                        icon: 2,
                        title:"提示"
                    });
                } else {
                    layer.alert(ret.msg, {
                        icon: 1,
                        title:"提示"
                    });
                }
            }
        })

        return false;
    });
</script>

<script>



    /******************************** Part 01 初始化开始**********************************/
//定义全局变量--数组

    var newText = new Array();
    var selectedText =  new Array();
    var existedText = new Array();

    $(function(){


        $(".show-labelitem").on("click",function(){
            $(this).hide();
            $(".hide-labelitem").show();
            $("#labelItem").show();
        });

        $(".hide-labelitem").on("click",function(){
            $(this).hide();
            $(".show-labelitem").show();
            $("#labelItem").hide();
        });


        $("input[name='imagelabels']").val('');      //已经选择的标签ID
        $("input[name='newtext']").val('');          //新建的标签文本，要存入数据库的
        $("input[name='selectedtext']").val('');
        $("input[name='existedtext']").val('');


//给标签库里的标签添加点击事件
        $(".label-item").on("click","li",function(){

            var id = $(this).attr("data");
            var text = $(this).children("span:nth-child(2)").html();
            if($(this).hasClass("selected")){
                return false;
            }
            if(addLabel(id,text)){                  //添加，并要把标签库里相应的标签设置为已选择
                $(this).addClass("selected");
            }

        });
//初始化4

        $.post("{:url('requirement/getSelectedTagList')}",{},function (res) {
            console.log(res)
            resetExistedText(res.tags,res.allTags);
        })

    })

    /********************************初始化结束**********************************/




    /******************************************** Part 02 设置数组和input**********************************************************/

    function resetDataValue(){                    /******1*****直接从最上面生成**/
    val = '';
        tags = []
        for(var i = 0; i < $(".label-selected").children("li").length; i++){
            var data = $(".label-selected").children("li").eq(i).attr("data");
            if(data!="0"){              //只存储通过标签库添加的 ID，新增的自定义标签 data 为 0   *********
                val += data+',';
                tags.push(data);
            }
        }
        $("input[name='imagelabels']").val(val);
        $("#tags_input").val(tags.join(","));

    }

    //2、3、4：数据同时存到 数组 和 input。数组：方便检索；input：方便观察     数组和文字，顺序一致

    function addNewText(labelName){              /*****2+***文字，数组 各自增****/
    valtext = $("input[name='newtext']").val();;
        valtext += labelName+',';
        $("input[name='newtext']").val(valtext);
        newText.push(labelName);
    }
    function removeNewText(labelName){          /******2-***数组————>文字****/
    valtext = '';
        var index = newText.indexOf(labelName);
        if(index !== -1)
        {
            newText.splice(index,1);
        }
        for(i=0;i<newText.length;i++)
        {
            valtext += newText[i]+',';
        }
        $("input[name='newtext']").val(valtext);

    }


    function resetSelectedText(){               /******3**根据 最上面 生成单独的数组和文字*****/
    selectedText=[];   //首先要清空
        valtext = '';
        for(i=0;i<$(".label-selected").children("li").length;i++)
        {
            var text = $(".label-selected").children("li").eq(i).text();
            selectedText[i]=text;
            valtext += selectedText[i]+',';
        }
        $("input[name='selectedtext']").val(valtext);

    }


    function resetExistedText(tags,allTags){               /******4**根据 标签库列表 生成单独的数组和文字*****/
    existedText=[];   //首先要清空
        valtext = '';
        allTags.map((obj)=>{
            existedText.push(obj.tag)
        })

        for (let i = 0; i < tags.length; i++){
            // var text = $(".label-item").children("li").eq(i).children("span:nth-child(2)").html();
            valtext += tags[i].tag+',';
            selectedText.push(tags[i].tag)
            if(addLabel(tags[i].id,tags[i].tag))   //新添加的标签，添加，并2+
            {
                addNewText(tags[i].tag);
            }
        }
        $("input[name='existedtext']").val(valtext);
        resetSelectedText()

    }


    /*********************************************设置数组和input结束*******************************************************/


    /******************************************* Part 03 添加****************************************/
//添加自定义标签
    $("#label-self").on("click",function(){      // 3情况：重复、标签库、新增

        var labelName = $("#labelName").val();
        if(labelName!=null&&labelName!=""){

            var indexOfselected = selectedText.indexOf(labelName);
            var indexOfexisted = existedText.indexOf(labelName);


            if(indexOfselected !== -1)     //已经存在于已选择，不添加
            {
                tips("标签已存在！");
                return;
            }

            else if(indexOfexisted !== -1) //已经存在于标签库，添加，并要把标签库里相应的标签设置为已选择
            {
                var li = $(".label-item").children("li").eq(indexOfexisted);
                var id = li.attr("data");
                if(addLabel(id,labelName)){
                    li.addClass("selected");
                }
                return;
            }
            else
            {

                $.post("{:url('fruit/addTag')}", { 'newTag': labelName }, function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, { icon: 1 }, function () {
                            return false;
                        });
                    } else {
                        let newTag = res.data;
                        console.log(res)
                        // $("#specialty").empty();
                        // $("#tag_container").append(' <input type="checkbox" lay-skin="primary" lay-filter="c_one" class="cityId" title="' + newTag.tag + '" value="' + newTag.id + '">');
                        //
                        // form.render();
                        let html = `<li data="${newTag.id}" class="selected"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>${newTag.tag}</span></li>`
                        $(".label-item").append(html)
                        if(addLabel(newTag.id,labelName))   //新添加的标签，添加，并2+
                        {
                            addNewText(labelName);
                        }

                    }
                });


            }
        }
        else{
            tips("请填写标签名！");
        }

    });


    //添加标签到最上面
    function addLabel(id,text){
        var num=8;              //标签最多个数
        // if($(".label-selected").children("li").length >= num){
        //     tips("最多可以选择"+num+"个哦");
        //     return false;
        // }

        var labelHTML = getappendHTML(id,text);
        $(".label-selected").append(labelHTML);

        //新增，刷新 1、3
        resetDataValue();
        resetSelectedText();

        return true;
    }


    /************************************************ Part 04 删除************************************/
//删除已选标签
    $(".label-selected").on("click","li .delete",function(){
        var id = $(this).parent().attr("data");
        var text = $(this).parent().text();
        //删除最上面
        $(this).parent().remove();

        //刷新 1、3
        resetDataValue();
        resetSelectedText();


        if(id == 0){             //删除的是新增标签  2-
            removeNewText(text);
        }
        else{                    //删除的是标签库里的标签  移除class
            $(".label-item").find("li[data='"+id+"']").removeClass("selected");
        }

    });

    /***************************************** Part 05 提交*******************************************/
    function submit()
    {
        var labelID = $("input[name='imagelabels']").val();
        var newtext = $("input[name='newtext']").val();     //保存到数据库
        alert(labelID);


    }

    /************************************************************************************/
    function getappendHTML(id,text){
        return "<li data='"+id+"''>"+text+"<div class='delete'></div></li>";
    }
    function tips(content) {
        layer.open({
            type: 1 ,
            offset: 'auto', //具体配置参考：offset参数项
            title : '提示',
            content: '<div style="padding: 20px 80px;">'+content+'</div>',
            btn: '确定',
            btnAlign: 'c', //按钮居中
            yes:layer.closeAll()
        });
    }
    
    $("#deleteFile").click(function () {
        if ($("#file").val()){
            layer.confirm('确认删除该文件?', {icon: 3, title:'提示'}, function(index){
                var file = $("#file")
                file.after(file.clone().val(""));
                file.remove();
                layer.closeAll()
            });
        }


    })
</script>
</body>

</html>
